<template>
  <div>
    <h4>前一日新增{{total}}例阳性，详细情况见下图：</h4>
    <!-- 前一天的数据：饼图 -->
    <div v-if="pageData.length > 0" id="prev_date_status_data" class="echart" style="width: 100vw;height: 60vh;"></div>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>
  <script>
let me;
import { getYangTotal, getYangListByStatus } from "@/api/fangyiData/bingli.api"
export default {
  data() {
    return {
      total: "--",
      pageData: [],
      // 前一日的起始时间点
      timeStart: "",
      timeEnd: "",
    }
  },
  created() {
  },
  mounted() {
    me = this;
    // 当前时间点减24小时，然后再算凌晨和夜间的起始时间段
    let d = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
    let year = d.getFullYear(), month = d.getMonth() + 1, date = d.getDate();
    me.timeStart = `${year}-${month > 9 ? month : "0" + month}-${date > 9 ? date : "0" + date} 00:00:00`;
    me.timeEnd = `${year}-${month > 9 ? month : "0" + month}-${date > 9 ? date : "0" + date} 23:59:59`;
    me.queryYangTotal();// 获取昨天的阳性总数
    me.queryYangListByStatus();
  },
  methods: {
    /**
     * 获取昨天的阳性总数
     */
    queryYangTotal() {
      getYangTotal({
        timeStart: me.timeStart,
        timeEnd: me.timeEnd
      }).then(res => {
        if (res.code == "200") {
          me.total = res.data;
        } else {
          me.total = "--";
        }
      }).catch(err => {
        me.total = "--";
      })
    },
    /**
     * 根据症状的严重程度查询新增数据
     */
    queryYangListByStatus() {
      let rLoading = me.openLoading();
      getYangListByStatus({
        timeStart: me.timeStart,
        timeEnd: me.timeEnd,
      }).then(res => {
        rLoading.close();
        if (res.code == "200") {
          me.pageData = res.data.map(item => {
            return {
              name: item.name,
              value: item.num
            }
          });
          if (me.pageData.length > 0) {
            me.$nextTick(() => {
              me.renderPrevDate();
            })
          }
        } else {
          me.$message.error(res.msg || "查询失败，请稍后再试~");
        }
      }).catch(err => {
        rLoading.close();
        me.$message.error(err.statusText || "对不起，系统繁忙，请稍后再试~");
      })
    },
    // 绘制图表
    renderPrevDate() {
      let charts = me.$echarts.init(document.getElementById('prev_date_status_data'));
      var option = {
        title: {
          text: '昨日新增病例数据',
          subtext: "按症状类型分类",
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '昨日新增',
            type: 'pie',
            radius: '50%',
            data: me.pageData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      charts.setOption(option);
    },
  },
}
  </script>
  <style lang="scss" scoped>
  h4 {
    padding-bottom: 32px;
  }
.no-data{
  margin-top: 20vh;
  text-align: center;
}
</style>